<!-- 支持 vue-router 的路由跳转 以及 http(s)链接跳转 -->

<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'

// defineOptions({
//   inheritAttrs: false,
// })

const props = defineProps({
  // 如果使用 TypeScript，请添加 @ts-ignore
  ...RouterLink.props,
  inactiveClass: String,
})

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})
</script>

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
    <slot />
  </a>
  <router-link v-else v-bind="$props">
      <slot />
  </router-link>
</template>

<style scoped lang="scss">

a {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    // background-color: salmon;
}

</style>